import React from 'react';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { Row, Col } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
const v1img = [
  {
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/group_photo/1.png',
    name: '机器人与智能制造青少年科技培养基地 启动仪式'
  },
  {
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/group_photo/2.png',
    name: '中国工程院院士在基地校现场演讲'
  },
  {
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/group_photo/3.png',
    name: '现场活动照片'
  },
]
type P = {
  id: string
}
function Content1(prop: P) {

  return (
    <div id={prop.id} className="container-fluid">
      <OverPack playScale={0.3}>
        <TweenOne
          animation={{
            opacity: 1,
            duration: 1000
          }}
          className="row"
          style={{ opacity: 0 }}
        >
          {
            v1img.map((e, key) => {
              return (<div key={key} className="col">
                <div className="div">
                  <img width="30%" src={e.img} alt="" />
                  <div className="img" >
                    {e.name}
                  </div>
                </div>
              </div>)
            })
          }
        </TweenOne>
      </OverPack>

    </div >
  );
}

export default Content1;
